<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  【微信消息 - 视频】
  道一源码：
  ① bug 修复：
    1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
      存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
    2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
  ② 体验优化：弹窗关闭后，自动暂停视频的播放

-->
<template>
  <div @click="playVideo()" class="video-play-icon-container">
    <!-- 提示 -->
    <div class="video-play-icon">
      <el-icon size="80">
        <VideoPlay/>
      </el-icon>
      <span>点击播放</span>
    </div>

    <!-- 弹窗播放 -->
    <el-dialog v-model="dialogVideo" title="视频播放" append-to-body width="840">
      <video-player
          v-if="dialogVideo"
          class="video-player vjs-big-play-centered"
          :src="props.url"
          poster=""
          crossorigin="anonymous"
          controls
          playsinline
          :volume="0.6"
          :width="800"
          :playback-rates="[0.7, 1.0, 1.5, 2.0]"
          autoplay
      />
    </el-dialog>
  </div>
</template>

<script setup>
import 'video.js/dist/video-js.css'
import {VideoPlayer} from '@videojs-player/vue'
import {ref} from "vue";
import {VideoPlay} from "@element-plus/icons-vue";

defineOptions({name: 'MyVideoPlayer'})

const props = defineProps({
  url: {
    type: String,
    required: true
  }
})

const dialogVideo = ref(false)

// const handleEvent = (log) => {
//   console.log('Basic player event', log)
// }

const playVideo = () => {
  dialogVideo.value = true
}
</script>
<style lang="scss" scoped>
.video-play-icon-container {
  .video-play-icon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column;
  }
}
</style>
